<!-- 设备管理 -->
<template>
  <div class="dashboard-container">
    <!-- 搜索框 -->
    <search label="设备编号：" @searchInnerCode="searchFn" />
    <!-- 表格 -->
    <el-card shadow="never">
      <Table :loading="loading" :table-data="equipmentList" :page="page" :labels="labels">
        <template #vmStatus="{scope}">
          {{ equipmentStatus(scope) }}
        </template>
        <template #status="{scope}">
          <div class="tag">
            <div :class="scope.status[10001]?'green':'yellow'">离线</div>
            <div :class="scope.status[10002]?'green':'yellow'">货道</div>
            <div :class="scope.status[10003]?'green':'yellow'">转动轴</div>
          </div>
        </template>
        <template #operation="{scope}">
          <el-button @click="detail(scope)">查看详情</el-button>
        </template>
      </Table>
      <page :total="+list.totalCount" :current-page.sync="page.pageIndex" :total-page="+list.totalPage" />
    </el-card>
    <!-- 弹出框 -->
    <findDialog :show-detail-dialog.sync="showDetailDialog" :sale-list="saleList" />
  </div>
</template>

<script>
// 导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import search from '@/components/equipment/search.vue'
import { getEquipmentList } from '@/api/equipment'
import Table from '@/components/equipment/table'
import page from '@/components/equipment/page'
import findDialog from './components/findDialog.vue'
import { getTimeOrder, getAmount, getReplenishment, getRepairCount, getSkuCollect } from '@/api/billManage'
import dayjs from 'dayjs'

export default {
  name: 'EquipmentManagement',
  components: { search, Table, page, findDialog },
  props: {
  },
  data() {
    return {
      loading: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        innerCode: null
      },
      typePage: {
        pageIndex: 1,
        pageSize: 100000
      },
      list: {},
      labels: {
        innerCode: '设备编号',
        'type.name': '设备型号',
        'node.name': '详细地址',
        'vmStatus': '运营状态',
        'status': '设备状态'
      },
      equipmentList: [],
      showDetailDialog: false,
      start: '',
      end: '',
      nextStart: '',
      nextEnd: '',
      saleList: {
        saleCount: '',
        salePrice: '',
        replenishment: '',
        repairCount: '',
        skuCollect: ''
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {
    equipmentStatus() {
      return ({ vmStatus }) => {
        if (vmStatus === 0) {
          return '未投放'
        } else if (vmStatus === 1) {
          return '运营'
        } else {
          return '撤机'
        }
      }
    }
  },
  // 监控data中的数据变化
  watch: {
    page: {
      deep: true,
      handler() {
        this.getEquipmentList()
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getEquipmentList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    async getEquipmentList() {
      this.loading = true
      const { data } = await getEquipmentList(this.page)
      this.equipmentList = data.currentPageRecords
      console.log(data)
      this.list = data
      this.loading = false
    },
    searchFn(item) {
      this.page.innerCode = item
      this.getEquipmentList()
    },
    async detail(scope) {
      // console.log(scope.innerCode)
      const dayjsTime = dayjs(`${new Date()}`).format('YYYY-MM-DD')
      const dayjsTimeStart = dayjs(`${new Date()}`).format('YYYY-MM')
      this.start = `${dayjsTimeStart}-01 00:00:00`
      this.end = `${dayjsTime} 23:59:59`
      this.nextStart = `${dayjsTimeStart}-01`
      this.nextEnd = `${dayjsTime}`
      const data1 = await getTimeOrder(this.start, this.end, scope.innerCode)
      this.saleList.saleCount = data1.data
      const data2 = await getAmount(this.start, this.end, scope.innerCode)
      this.saleList.salePrice = data2.data
      const data3 = await getReplenishment(this.nextStart, this.nextEnd, scope.innerCode)
      this.saleList.replenishment = data3.data
      const data4 = await getRepairCount(this.nextStart, this.nextEnd, scope.innerCode)
      this.saleList.repairCount = data4.data
      const data5 = await getSkuCollect(this.nextStart, this.nextEnd, scope.innerCode)
      this.saleList.skuCollect = data5.data
      this.showDetailDialog = true
    }
  }
}
</script>
<style scoped lang='scss'>
  .btn{
    margin-bottom: 20px;
  }
.handle{
  background: #fbf4f0;
  border: none;
  width: 80px;
}
.el-button{
  padding: 0 !important;
  border: none;
}
.cell{
  .el-button--default{
  color: #5f84ff;
}
}
::v-deep .el-dialog__header{
  font-weight: 600;
  span{
    font-size: 16px;
    line-height: 22px;
  }
}
::v-deep .el-dialog {
    border-radius: 10px;
    width: 630px;
}
::v-deep .el-select{
  width: 396px;
}
.el-form-item{
  margin-bottom: 0;
}
.tag{
  display: flex;
  .yellow{
    background: #ff665f linear-gradient(135deg,#ffb043,#ffc020);
  }
  .green{
    background: #ff665f linear-gradient(135deg,#3fc997,#4bda98);;
  }
  div{
    height: 23px;
    padding: 0 12px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    line-height: 23px;
    margin-right: 2px;
  }
}

</style>
